<template>
    <el-main class="container">
        <el-col class="header-container">
            <div class="left-actions">
                <el-form :inline="true" class="search-form">
                    <el-form-item>
                        <el-input placeholder="请输入优惠券名称/ID" v-model="searchKey" clearable class="search-input"
                            @keyup.enter.native="handleSearch">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleSearch">搜索</el-button>
                        <el-button type="danger" @click="handleBatchAction" :disabled="!selectedCoupons.length">
                            执行操作
                        </el-button>
                        <el-button type="success" icon="el-icon-plus" @click="handleCreate">
                            新建优惠券
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-col>

        <el-table :data="couponList" style="width: 100%" @selection-change="handleSelectionChange" stripe border>
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column prop="id" label="券ID" width="180" align="center" />
            <el-table-column prop="couponName" label="券名称" width="200" align="center" />

            <el-table-column label="券类型" width="120" align="center">
                <template slot-scope="{row}">
                    <el-tag
                        :type="row.couponType === '满减券' ? 'warning' : row.couponType === '折扣券' ? 'success' : 'danger'">
                        {{ row.couponType }}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column label="优惠信息" width="200" align="center">
                <template slot-scope="{row}">
                    <div v-if="row.couponType === '满减券'" class="amount-display">
                        ￥{{ row.discountAmount }}（满{{ row.minAmount }}可用）
                    </div>
                    <div v-else-if="row.couponType === '折扣券'" class="discount-rate">
                        {{ (row.discountRate * 10).toFixed(0) }}折
                    </div>
                    <div v-else class="amount-display">
                        ￥{{ row.discountAmount }}（无门槛）
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="有效期" width="250" align="center">
                <template slot-scope="{row}">
                    <div class="time-range">
                        {{ row.startTime }} 至 {{ row.endTime }}
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="库存" width="120" align="center">
                <template slot-scope="{row}">
                    <el-tag :type="row.remaining > 0 ? 'success' : 'danger'">
                        {{ row.remaining }}/{{ row.totalQuantity }}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column label="状态" width="120" align="center">
                <template slot-scope="{row}">
                    <el-tag :color="row.statusColor" effect="dark">
                        {{ row.status }}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column label="操作" width="180" fixed="right" align="center">
                <template slot-scope="{row}">
                    <el-button size="mini" type="text" @click="handleEdit(row.id)" :disabled="row.disabled">
                        编辑
                    </el-button>
                    <el-button size="mini" type="text" @click="handleToggleStatus(row)" :style="{
                        color: row.status === '已结束' ? '#909399' : '#F56C6C',
                        cursor: row.disabled ? 'not-allowed' : 'pointer'
                    }" :disabled="row.disabled">
                        {{ row.status === '已结束' ? '已失效' : '终止活动' }}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination-container">
            <el-pagination :current-page="pagination.current" :page-size="pagination.size" :total="pagination.total"
                layout="total, prev, pager, next, jumper" @current-change="handlePageChange" />
        </div>
    </el-main>
</template>

<script>
import { getCouponList, batchUpdateCoupons } from '@/api/admin/Conpou'

export default {
    data() {
        return {
            searchKey: '',
            batchActionType: '',
            selectedCoupons: [],
            couponList: [],
            pagination: {
                current: 1,
                size: 10,
                total: 0
            }
        }
    },
    methods: {
        // 保持您原有的方法结构不变
        async loadCoupons() {
            try {
                const { data } = await getCouponList(this.pagination.current)
                console.log(data.data.records)
                this.couponList = data.data.records

                this.pagination.total = data.data.total
            } catch (error) {
                this.$message.error('获取列表失败')
            }
        },

        // 时间格式化方法（保持原有逻辑）
        formatTime(timeStr) {
            if (!timeStr) return ''
            return this.$moment(timeStr).format('YYYY-MM-DD HH:mm:ss')
        },

        handleSelectionChange(selection) {
            this.selectedCoupons = selection.map(item => item.id)
        },

        async handleBatchAction() {
            if (!this.selectedCoupons.length) {
                this.$message.warning('请选择要操作的优惠券')
                return
            }
            console.log('this.selectedCoupons', this.selectedCoupons);

            try {
                await batchUpdateCoupons(this.selectedCoupons)
                this.$message.success('操作成功')
                this.loadCoupons()
                this.selectedCoupons = []
            } catch (error) {
                this.$message.error('操作失败')
            }
        },

        handleEdit(id) {
            console.log('id', id);

            this.$router.push(`/home/sms/coupon/edit/${id}`)
        },

        handleCreate() {
            this.$router.push('/home/sms/coupon/addCoupon')
        },

        handlePageChange(page) {
            this.pagination.current = page
            this.loadCoupons()
        },

        handleSearch() {
            this.pagination.current = 1
            this.loadCoupons()
        }
    },
    mounted() {
        this.loadCoupons()
    }
}
</script>

<style scoped>
/* 保持您原有的样式不变 */
.container {
    padding: 24px;
    background: #f5f7fa;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 16px 24px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.search-form {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-form .search-input {
    width: 280px;
}

.search-form .search-input>>>.el-input__inner {
    border-radius: 20px;
    padding-left: 35px;
}

.pagination-container {
    padding: 20px;
    display: flex;
    justify-content: flex-end;
}

.amount-display {
    font-weight: 600;
    color: #E6A23C;
    font-size: 14px;
}

.discount-rate {
    color: #67C23A;
    font-weight: bold;
    font-size: 15px;
}

.time-range {
    color: #606266;
    font-size: 13px;
}

/* 新增样式适配 */
.amount-display {
    font-weight: 600;
    color: #E6A23C;
    font-size: 14px;
}

.discount-rate {
    color: #67C23A;
    font-weight: bold;
    font-size: 15px;
}

.time-range {
    color: #606266;
    font-size: 13px;
}

/* 保持与之前示例一致的样式 */
.amount-display {
    font-size: 16px;
    color: #E6A23C;
}

.time-range {
    color: #909399;
    font-size: 12px;
}

.status-active {
    color: #67C23A;
}

.status-disabled {
    color: #F56C6C;
}

.container {
    padding: 24px;
    background: #f5f7fa;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 16px 24px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.search-form {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-form .search-input {
    width: 280px;
}

.search-form .search-input>>>.el-input__inner {
    border-radius: 20px;
    padding-left: 35px;
}

.action-btn {
    padding: 10px 20px;
    border-radius: 4px;
    transition: all 0.3s;
}

.action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.table-card {
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.table-card>>>.el-card__body {
    padding: 0;
}

.data-table>>>th {
    background: #f8f9fa !important;
    font-weight: 600;
    color: #2c3e50;
}

.data-table>>>tr {
    transition: all 0.2s;
    cursor: pointer;
}

.data-table>>>tr:hover {
    background: #f8f9fa !important;
    transform: translateX(4px);
}

.pagination-container {
    padding: 20px;
    display: flex;
    justify-content: flex-end;
}

.user-avatar {
    cursor: pointer;
    transition: all 0.3s;
}

.user-avatar:hover {
    transform: scale(1.1);
}

.avatar-menu>>>.el-dropdown-menu__item {
    padding: 10px 20px;
    font-size: 14px;
}

.avatar-menu>>>.el-dropdown-menu__item:hover {
    background: #f5f7fa;
    color: #409EFF;
}

.smart-pagination>>>.btn-prev,
.smart-pagination>>>.btn-next {
    padding: 0 12px;
    border-radius: 4px;
}

.smart-pagination>>>.number {
    min-width: 36px;
}

.smart-pagination>>>.active {
    background: #409EFF;
    color: white !important;
}
</style>